<template>
  <div class="name-card">
    <div class="rank-badge" v-if="rank">{{ rank }}</div>
    <div class="name-display">{{ surname + name.characters }}</div>
    <div class="name-score">
      <span class="score-label">评分:</span>
      <span class="score-value">{{ name.score }}分</span>
      <div class="score-stars">
        <i v-for="n in 5" 
           :key="n" 
           class="fas fa-star"
           :class="{ 'filled': n <= name.score/20 }">
        </i>
      </div>
    </div>
    <div class="name-categories">
      <span class="category-tag">{{ name.categories.first }}</span>
      <span class="category-tag">{{ name.categories.second }}</span>
    </div>
    <div class="name-meaning">
      <h3>名字含义:</h3>
      <p>{{ name.meaning }}</p>
    </div>
    <div class="name-source" v-if="name.source">
      <h4>诗词出处:</h4>
      <p>{{ name.source.first }}</p>
      <p>{{ name.source.second }}</p>
    </div>
    <button 
      @click="$emit('toggle-favorite')" 
      :class="['favorite-btn', { 'is-favorite': name.isFavorite }]"
      :title="name.isFavorite ? '取消收藏' : '收藏名字'"
    >
      <i :class="['fa', name.isFavorite ? 'fa-heart' : 'fa-heart-o']"></i>
      <span class="favorite-tooltip">
        {{ name.isFavorite ? '取消收藏' : '收藏名字' }}
      </span>
    </button>
  </div>
</template>

<script>
export default {
  name: 'NameCard',
  props: {
    surname: {
      type: String,
      required: true
    },
    name: {
      type: Object,
      required: true
    },
    rank: {
      type: Number,
      default: null
    }
  }
}
</script>

<style scoped>
.name-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(var(--spacing-md), 3vw, var(--spacing-xl));
  position: relative;
  transition: transform 0.3s ease;
}

.name-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.name-display {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: bold;
  color: var(--text-color);
  margin: var(--spacing-md) 0;
  word-break: break-all;
}

.name-score {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.score-label {
  font-weight: bold;
}

.score-value {
  color: var(--secondary-color);
  font-size: 1.2rem;
}

.score-stars {
  color: #ffd700;
}

.score-stars .filled {
  color: #ffd700;
}

.name-meaning {
  background-color: #f5f5f5;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  margin: var(--spacing-md) 0;
}

.favorite-btn {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--secondary-color);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: var(--spacing-sm);
  border-radius: 50%;
  z-index: 1;
}

.favorite-btn:hover {
  transform: scale(1.1);
  background-color: rgba(255, 107, 107, 0.1);
}

.favorite-btn.is-favorite {
  color: #ff0000;
  animation: heart-beat 0.3s ease;
}

.favorite-tooltip {
  position: absolute;
  bottom: -30px;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.favorite-btn:hover .favorite-tooltip {
  opacity: 1;
  visibility: visible;
}

@keyframes heart-beat {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.name-source {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid #eee;
  font-size: 0.9rem;
  color: #666;
}

.name-source h4 {
  color: var(--text-color);
  margin-bottom: var(--spacing-sm);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .name-card {
    margin: var(--spacing-sm) 0;
  }

  .name-score {
    flex-direction: column;
    align-items: flex-start;
  }

  .score-stars {
    margin-top: var(--spacing-xs);
  }

  .name-source {
    font-size: 0.85rem;
  }
}

/* 触摸设备优化 */
@media (hover: none) {
  .name-card:hover {
    transform: none;
  }

  .favorite-btn {
    padding: var(--spacing-md);
  }
  
  .favorite-tooltip {
    display: none;
  }
}

.rank-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  background-color: var(--primary-color);
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: var(--shadow-sm);
}

.name-categories {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  flex-wrap: wrap;
}

.category-tag {
  background-color: var(--bg-light);
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 0.8rem;
  color: var(--text-color);
}
</style> 